<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>教师列表</title>
</head>
<style>
    .hide{
        display: none;
    }
    .shadow{
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        top: 0;
        background-color: black;
        opacity: 0.4;
        z-index: 999;
    }
    .loading{
        position: fixed;
        width: 800px;
        height: 600px;
        left: 25%;
        top: 25%;
        margin-left: -25px;
        margin-top: -25px;
        background-image: url("/static/loading.gif");
    }
    .addmodal{
        position: fixed;
        left: 50%;
        top: 50%;
        background-color: white;
        width: 400px;
        height: 500px;
        margin-left: -200px;
        margin-top: -200px;
        z-index: 1000;
    }
</style>
<body>
    <h1>教师列表</h1>
    <div>
        <a href="/add_teacherclass/">添加</a>
        <a id="btnAdd">对话框添加教师</a>
    </div>
    <table>
        <thead>
            <tr>
                <th>ID</th>
                <th>老师姓名</th>
                <th>任课班级</th>
            </tr>
        </thead>
        <tbody>
            {% for row in teachers_list %}
                <tr>
                    <td>{{ row.tid }}</td>
                    <td>{{ row.name }}</td>
                    <td>
                        {% for item in row.title %}
                            <span style="display: inline-block;padding: 5px;border: 1px solid red;">{{ item }}</span>
                        {% endfor %}
                    </td>
                    <td>
                        <a href="/edit_teacherclass/?nid={{ row.tid }}">编辑</a>
                        <a class="btnEdit">对话框编辑</a>
                        <a>删除</a>
                    </td>
                </tr>
            {% endfor %}
        </tbody>
    </table>

    <div id="shadow" class="shadow hide"></div>
    <div id="loading" class="loading hide"></div>
    <div id="addmodal" class="addmodal hide">
        <p>
            老师姓名:<input type="text" name="name" id="addName">
        </p>
        <p>
            <select id="classIds" multiple size="10">

            </select>
        </p>
        <a id="addSubmit">提交</a>
        <span id="editError" style='color: red'></span>
    </div>

    <div id="editmodal" class="addmodal hide">
        <P>
            老师姓名:<input type="text" name="name" id="editName">
            <input id="editid" type="text" style="display: none">
        </P>
        <P>
            <select id="editclassIds" multiple size="10">

            </select>
        </P>
        <a id="editSubmit">提交</a>
    </div>

    <script src="/static/jquery-1.11.3.js"></script>
    <script>
        $(function () {
            bindAdd();
            bindAddSubmit();
            bindEdit();
            binSubmitEidt();
        });
        function bindAdd(){
            $("#btnAdd").click(function () {
                $("#shadow,#loading").removeClass('hide');
                /*
                发送ajax请求，获取所有班级信息
                再将classIds下拉框生成option
                 */
                $.ajax({
                    url:'/get_all_class/',
                    type:"GET",
                    dataType:"JSON",
                    success:function (arg) {
                        //将所有的数据添加到select,option
                        $.each(arg, function (i, row) {
                            var tag = document.createElement('option');
                            tag.innerHTML = row.title;
                            tag.setAttribute('value',row.id);
                            $("#classIds").append(tag);
                        });
                        $("#loading").addClass('hide');
                        $("#addmodal").removeClass('hide');
                    }
                })
        })
        }
        function bindAddSubmit() {
            $("#addSubmit").click(function () {
                var name = $("#addName").val();
                var class_id_list = $("#classIds").val();
                $.ajax({
                    url : '/modal_add_teacherclass/',
                    type: 'POST',
                    data:{"name":name,"class_id_list":class_id_list},
                    dataType:"JSON",  //写列表用traditional可以，如果要发送字典需要使用序列化JSON.stringify({k1:'{k1}',})
                    traditional:true,//提交的值有列表需要添加此属性
                    success:function (arg) {
                        if(arg.status){
                            location.reload();
                        }else{
                            $("#editError").text(arg.message);
                        }
                    }
                })
            })
        }
        function bindEdit() {
            $(".btnEdit").click(function () {
                $("#shadow,#editmodal").removeClass('hide');
                var row = $(this).parent().prevAll();
                var teacherid = $(row[2]).text();
                var name = $(row[1]).text();
                $("#editid").val(teacherid);
                $("#editName").val(name);
                $.ajax({
                    url:"/modal_edit_teacher/",
                    type:"GET",
                    data:{"teacherid":teacherid},
                    dataType:"JSON",
                    success:function (arg) {
                        var class_info = arg.class_info;
                        var all_class_info = arg.all_class_info;
                        $.each(all_class_info, function (i, row) {
                            var tag = document.createElement('option');
                            tag.innerHTML = row.title;
                            tag.setAttribute('value',row.id);
                            if (class_info.indexOf(row.id)!=-1){ //如果row.id在class_info中
                                tag.setAttribute('selected',true);
                            }
                            $("#editclassIds").append(tag);
                        });

                    }
                })
            })
        }
        function binSubmitEidt() {
            $("#editSubmit").click(function () {
                var name = $("#editName").val();
                var teacher_id = $("#editid").val();
                var class_list = $("#editclassIds").val();
                $.ajax({
                    url:"/modal_edit_teacher/",
                    type:"POST",
                    data:{"name":name, "teacher_id":teacher_id, "class_list":class_list},
                    dataType:"JSON",
                    traditional: true,
                    success:function (arg) {
                        if(arg.status){
                            location.reload();
                        }else{
                            console.log(arg.message);
                        }
                    }
                })
            })
        }
    </script>
</body>
</html>